<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  购物车</title>
    <style>
        body{
            width: 800px;
            margin: 20px auto;
        }
        .title >img{
            display: inline-block;
        }
        .title >button{
            margin-right: 20px;
            width: 60px;
            float: right;
            padding: 5px;
            font-size: 12px;
            background-color: crimson;
            color: #fff;
            border-radius: 6px;
            border: none;
        }
        .container::after{ 
            content: '';
            display: block;
            clear: both;
        }
        .container{
            width: 800px;
            height: 400px;
            background-image: url(./image/shoppingBg.jpg);
            position: relative;
        }
        .container >.box{
           position: absolute;
           top: 150px;
           right: 200px;        
        }
        .container >.box input{
            width: 30px;
            margin: 0 40px;
        }
        .container >.box1{
           position: absolute;
           top: 250px;
           right: 200px;        
        }
        .container >.box1 input{
            width: 30px;
            margin: 0 40px;
        }
        .container > .foot {
            position: absolute;
            bottom: 0;
            right: 0;

            width: 200px;
           height: 40px;
        }
        .container > .foot >.jiesuan{
            background-color: darkblue;
            width: 40px;
            height: 20px;
        }
        .container >.foot >button{
            width: 60px;
            float: right;
            padding: 5px;
            font-size: 12px;
            background-color: crimson;
            color: #fff;
            border-radius: 6px;
            border: none;
        }


    </style>
</head>
<body>
    <div class="title">
        <img src="./image/dd_logo.jpg" alt="">
        <button>关闭</button>
    </div>
    <div class="container">
        <div class="box">
            <span>$21.9</span>
            <input type="text">
            <span>21.9</span>
        </div>
        <div class="box1">
            <span>$21.9</span>
            <input type="text">
            <span>21.9</span>
        </div>
        <div class="foot">
            <span class="jiesuan">111</span>
             <button>结算</button>
        </div>
        
    </div>
    
   
</body>
</html>
